import React from 'react';
import { Form, Input, Switch, DatePicker } from 'antd';

export default function PropertyPanel({ canvas, selectedIndex, setCanvas }) {
  if (selectedIndex === null) return <div style={{ color: '#bbb' }}>请选择画布中的组件</div>;
  const comp = canvas[selectedIndex];
  if (!comp) return null;
  const handleChange = (changed) => {
    const newCanvas = [...canvas];
    newCanvas[selectedIndex].props = { ...newCanvas[selectedIndex].props, ...changed };
    setCanvas(newCanvas);
  };
  if (comp.type === 'button') {
    return (
      <Form layout="vertical" initialValues={comp.props} onValuesChange={(_, all) => handleChange(all)} key={selectedIndex}>
        <Form.Item label="按钮文本" name="label"><Input /></Form.Item>
        <Form.Item label="颜色" name="color"><Input type="color" /></Form.Item>
        <Form.Item label="字体大小" name="size"><Input type="number" min={12} max={32} /></Form.Item>
      </Form>
    );
  }
  if (comp.type === 'input') {
    return (
      <Form layout="vertical" initialValues={comp.props} onValuesChange={(_, all) => handleChange(all)} key={selectedIndex}>
        <Form.Item label="占位符" name="placeholder"><Input /></Form.Item>
        <Form.Item label="宽度" name="width"><Input type="number" min={100} max={600} /></Form.Item>
      </Form>
    );
  }
  if (comp.type === 'select') {
    return (
      <Form layout="vertical" initialValues={comp.props} onValuesChange={(_, all) => handleChange(all)} key={selectedIndex}>
        <Form.Item label="选项" name="options">
          <Input.TextArea placeholder='格式: [{"value":"A","label":"选项A"},{"value":"B","label":"选项B"}]' autoSize />
        </Form.Item>
        <Form.Item label="默认值" name="defaultValue"><Input /></Form.Item>
        <Form.Item label="宽度" name="width"><Input type="number" min={100} max={600} /></Form.Item>
      </Form>
    );
  }
  if (comp.type === 'switch') {
    return (
      <Form layout="vertical" initialValues={comp.props} onValuesChange={(_, all) => handleChange(all)} key={selectedIndex}>
        <Form.Item label="默认开关状态" name="defaultChecked"><Switch /></Form.Item>
      </Form>
    );
  }
  if (comp.type === 'date') {
    return (
      <Form layout="vertical" initialValues={comp.props} onValuesChange={(_, all) => handleChange(all)} key={selectedIndex}>
        <Form.Item label="日期格式" name="format"><Input placeholder="YYYY-MM-DD" /></Form.Item>
      </Form>
    );
  }
  return <div style={{ color: '#bbb' }}>暂不支持该组件属性编辑</div>;
} 